<template>
	<view>
		<view class="cate-nav">
			<view v-for="(cate,cidx) in cates" class="cate" :class="cidx == cateCur?'on':'' " @click="clickCate(cidx)">
				{{cate.name}}
			</view>
		</view>
		<view class="main">
			<view class="cate-items-box">
				<view v-for="(ci,cindex) in cateItems" class="cate-items" :class="cindex == cateItemCur?'on':''"
					@click="clickCateItem(cindex)">
					{{ci.name}}
				</view>
			</view>
			<!-- 商品 -->
			<view class="goods-list">
				<v-goods price="4500" src="https://game.gtimg.cn/images/lol/act/img/skinloading/24000.jpg"
					>
					<template #title>
						<view>武器大师</view>
					</template>
					<template #des>
						<view>武器大师·贾克斯，是MOBA竞技网游中的英雄角色，英雄定位为战士，刺客</view>
					</template>
				</v-goods>
			</view>
		</view>
	</view>
</template>

<script>
	import cateData from '@/json/cate.json'
	import Storage from '@/utils/storage.js'
	export default {
		data() {
			return {
				cates: [],
				cateCur: 0,
				cateItems: [],
				cateItemCur: 0
			}
		},
		onLoad() {
			this.cates = cateData
			let s_cateCur = Storage.get('cateCur')
			if (0 != s_cateCur - 0) {
				this.cateCur = s_cateCur
			}
			this.cateChildren();
		},
		methods: {
			clickCate(index) {
				this.cateCur = index
				Storage.set("cateCur", index)
				this.cateChildren();
			},
			clickCateItem(index) {
				this.cateItemCur = index
				Storage.set("cateItemCur", index)
			},
			cateChildren() {
				this.cateItems = this.cates[this.cateCur].children
				// console.log(JSON.stringify(this.cates[this.cateCur].children ));
			}
		}
	}
</script>

<style>
	/* 顶部导航栏自定义-我们用样式开发 */
	.cate-nav {
		position: fixed;
		/* css平台差异样式  */
		top: 88rpx;
		left: 0;
		width: 200rpx;
		height: 100vh;
		background-color: #F2F2F2;
		box-shadow: 1px 1px 5px rgba(100, 100, 100, 0.2);
		padding: 20rpx 0;
		z-index: 1;
	}

	.cate {
		width: 200rpx;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		color: #444444;
	}

	.cate.on {
		background: #FFF;
		color: #d81e06;
		width: 192rpx;
		border-left: 4px solid #d81e06;
	}

	.main {
		width: 550rpx;
		margin-left: 200rpx;
	}

	.cate-items-box {
		width: 550rpx;
		height: 60rpx;
		background-color: #F2F2F2;
		white-space: nowrap;
		overflow-x: scroll;
	}
	.cate-items-box::-webkit-scrollbar{
		display: none;
	}

	.cate-items {
		display: inline-block;
		width: 140rpx;
		height: 60rpx;
		text-align: center;
		line-height: 60rpx;
		color: #444444;
	}

	.cate-items.on {
		height: 56rpx;
		color: #d81e06;
		border-bottom: 4rpx solid #d81e06;
	}
</style>
